<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>线性渐变与放射渐变</title>
</head>
<body>

<canvas id="canvas1" width="600" height="300">
    升级你的浏览器
</canvas>

<hr/>

<canvas id="canvas2" width="600" height="300">
    升级你的浏览器
</canvas>

<script>
    //线性渐变
    var canvas1  =   document.getElementById('canvas1'),
            context1    =   canvas1.getContext('2d'),
            gradient1    =   context1.createLinearGradient(0,0,canvas1.width,0);//创建渐变线
    gradient1.addColorStop(0,'blue');
    gradient1.addColorStop(0.25,'white');
    gradient1.addColorStop(0.5,'purple');
    gradient1.addColorStop(0.75,'red');
    gradient1.addColorStop(1,'yellow');

    context1.fillStyle  =   gradient1;
    context1.rect(0,0,canvas1.width,canvas1.height);
    context1.fill();

//放射渐变
    var canvas2  =   document.getElementById('canvas2'),
            context2 =   canvas2.getContext('2d'),
            gradient2=   context2.createRadialGradient(canvas2.width/2,canvas2.height,10,canvas2.width/2,0,100);//创建放射渐变圆锥
    gradient2.addColorStop(0,'blue');
    gradient2.addColorStop(0.25,'white');
    gradient2.addColorStop(0.5,'purple');
    gradient2.addColorStop(0.75,'red');
    gradient2.addColorStop(1,'yellow');

    context2.fillStyle  =   gradient2;
    context2.rect(0,0,canvas2.width,canvas2.height);
    context2.fill();

</script>

</body>
</html>